<template>
  <div class="box">
    <!-- 修改门店信息 -->

    <!-- 面包屑导航 -->
    <Crumbs></Crumbs>

    <div class="storeAddList">
      <div class="box">
        <el-form ref="form" label-width="100px">
          <el-form-item label="门店名称">
            <el-input v-model="row.storename"></el-input>
          </el-form-item>
          <!-- 修改图片 -->
          <el-form-item label="门店照片">
            <el-upload class="avatar-uploader" action="http://127.0.0.1:7001/api/loadimg" :on-success="handleAvatarSuccess">
              <img v-if="storeimg" :src="row.storeimg" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <!-- 三级联动 -->
          <el-form-item label="省市区">
            <el-select v-model="province" placeholder="请选择省">
              <el-option v-for="item in Area" :key="item.value" :label="item.label" :value="item"> </el-option>
            </el-select>
            <el-select v-model="city" placeholder="请选择市">
              <el-option v-for="item in cityQuery" :key="item.value" :label="item.label" :value="item"> </el-option>
            </el-select>
            <el-select v-model="area" placeholder="请选择区">
              <el-option v-for="item in areaQuery" :key="item.value" :label="item.label" :value="item"> </el-option>
            </el-select>
          </el-form-item>

          <!-- 经纬度 -->
          <el-form-item label="门店经纬度">
            <el-row :gutter="20">
              <el-col :span="20">
                <div class="grid-content bg-purple" style="display: flex">
                  <p style="display: flex; align-items: center; font-size: 20px"><el-input :disabled="true" v-model="row.store_jing" placeholder="请输入经度"></el-input>°E</p>
                  <p style="display: flex; align-items: center; font-size: 20px"><el-input :disabled="true" v-model="row.store_wei" placeholder="请输入纬度" style="margin: 0 10px"></el-input>°N</p>

                  <el-button plain disabled style="margin-left: 10px">选择坐标</el-button>
                </div>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="门店地址">
            <el-input v-model="row.position"></el-input>
          </el-form-item>

          <el-form-item label="门店电话">
            <el-input v-model="row.phone"></el-input>
          </el-form-item>

          <el-form-item label="营业时间">
            <el-time-picker is-range v-model="value1" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"> </el-time-picker>
          </el-form-item>

          <el-form-item label="门店支持">
            <el-radio-group v-model="resource">
              <el-radio label="支持自提"></el-radio>
              <el-radio label="支持外卖"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="联系人信息">
            <!-- <el-form-item>姓名</el-form-item> -->
            <el-input v-model="row.operator"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button @click="cancelBtn">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getXmodifystoreAdmin, getXstoreAdmin } from '../../../api/index'
import Crumbs from '../Crumbs.vue'
export default {
  data() {
    return {
      //数据信息
      storename: '',
      storeimg: '',
      position: '',
      phone: '',
      operator: '',
      store_jing: '',
      store_wei: '',
      //三级联动
      Area: [],
      cityQuery: [],
      areaQuery: [],
      province: '',
      city: '',
      area: '',
      dialogVisible: false,
      resource: '',
      row: '',
      //时间
      value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
    }
  },

  methods: {
    // 图片上传
    handleAvatarSuccess(res, file) {
      console.log(res, file)
      this.row.storeimg = `http://127.0.0.1:7001${res.data}`
      console.log(this.row.storeimg)
    },
    //确定
    onSubmit() {
      const obj = {
        id: this.row.id,
        storename: this.row.storename,
        storeimg: this.row.storeimg,
        position: this.row.position,
        phone: this.row.phone,
        operator: this.row.operator,
      }
      getXmodifystoreAdmin(obj).then((res) => {
        console.log(res)
      })
      this.$router.push('/storeAdmin')
      getXstoreAdmin().then((res) => {
        this.tableData = res.data
      })
    },
    //取消
    cancelBtn() {
      this.$router.push('/storeAdmin')
    },
  },
  watch: {
    // 监听省级
    province: function (newValue) {
      ;(this.cityQuery = []), (this.areaQuery = []), (this.shi = ''), (this.qu = '')
      this.Area.forEach((item) => {
        if (newValue.label === item.label) {
          this.cityQuery = item.children
          this.city = this.cityQuery[0]
          // console.log("city", this.cityQuery);
        }
      })
    },
    // 监听市级
    city: function (newValue) {
      ;(this.areaQuery = []), (this.area = '')
      this.cityQuery.forEach((item) => {
        if (newValue.label === item.label) {
          this.areaQuery = item.children
          this.area = this.areaQuery[0]
          // console.log("area", this.areaQuery);
        }
      })
    },
  },
  created() {
    //三级联动
    this.Area = require('../../../api/city/city').city
    // console.log("this.Area", this.Area);
    this.province = this.Area[0]
    //获取信息
    if (this.$route.params.list == undefined) {
      this.$router.push('/storeAdmin')
    } else {
      this.row = this.$route.params.list
    }
  },
  components: { Crumbs },
}
</script>

<style lang="scss" scoped>
.storeAddList {
  width: 1000px;
  margin: 0 auto;
  .box {
    width: 800px;
    margin-top: 20px;
  }
}
</style>
